<template>
  <view class="md-select" :style="{ width: props.width }">
    <uni-data-select :clear="false" class="md-data-select" @change="handleChange" v-bind="attrs"></uni-data-select>
  </view>
</template>

<script setup lang="ts">
import { useAttrs } from 'vue';
/**
 * md-select
 * 用法同uni-data-select属性一致
 * https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html
 */
const attrs = useAttrs(); // 透传过来的属性及方法
const emit = defineEmits(['change']);

const handleChange = (val: any) => {
  emit('change', val);
};

interface PropsType {
  width?: string; // 宽度
}
// 接收props
let props = withDefaults(defineProps<PropsType>(), {
  width: '180rpx',
});
</script>

<style lang="scss" scoped>
.md-select {
  width: 180rpx;
  height: 48rpx;
  border: 1rpx solid #01604a;
  border-radius: 27rpx;
}
</style>
